import React, { Component } from 'react'
import { Modal, Button, Form, Input } from 'antd';
import 'antd/dist/antd.css';
import './index.css'

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 }
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
 export default class ModalForm extends Component {

  formRef = React.createRef();

  constructor(props) {
    super(props);
    
    this.state = {
      visible: this.props.visible, //由父组件的props决定，this.props.xx
      data: this.props.data
    }
  }


  // componentDidMount() {
  //   console.log(this.state.data.age + "数据")
  // }
  // 生命周期函数，接受传入的props，现在这个生命周期仍可以用。官网推荐使用新的生命周期static
  // getDerivedStateFromProps，它的state永远取决于父组件的props，将在后续文章探索它的使用方法。
  componentWillReceiveProps(nextProps) {
    this.setState({
      visible: nextProps.visible
    })
  }

  handleOk = e => {
    this.setState({
      visible: false,
    }, () => console.log(' handleOk visible', this.state.visible));
    this.props.AA(); //在子组件中调用父组件的AA方法
  };

  // handleCancel = e => {
  //   this.setState({
  //     visible: false
  //   }, () => {
  //     console.log('handleCancel visible', this.state.visible)
  //   });
  // };
  handleCancel = e => {
    // debugger;
    // this.setState({
    //   visible:false},
    //     () =>{

    //     this.props.setParvisible
    // })

    this.props.setParvisible()


  }

  onSave = ()=>{
    // const values = await form.validateFields()  //2.表单验证并获取表单值
    // setCreatModal(false)
    debugger
}


  // onSave = (values) => {
  //  debugger;
  //   this.props.setParvisible()
    // if(this.props.title=='新增'){
    //     global.service.post('/api/user/add', { ...values, area: values.area.join(',') }).then(data => {
    //         message.success('操作成功')
    //         this.onCancel()
    //         // 刷新列表
    //         this.props.refreshList()
    //     })
    //     return
    // }
    // global.service.post('/api/user/update', { ...values, area: values.area.join(','),id:this.props.data.id }).then(data => {
    //     message.success('操作成功')
    //     this.onCancel()
    //     // 刷新列表
    //     this.props.refreshList()
    // })

  // }


  onFinish = (values) => {
    console.log("修改成功")
    console.log(values);
  };

  render() {
    return (
      <div>
        <Modal width={500}
          visible={this.state.visible}
          title={<span>修改报告单</span>}
          centered={true}
          okText="确认"
          cancelText="取消"
          onOk={() => this.formRef.current.submit()}
          onCancel={this.handleCancel}
          className={'m-readonly-modal'}
        >
          {/* ref={this.formRef} */}
          <Form layout='horizontal '  onFinish={this.onFinish} ref={this.formRef} >
            <Form.Item {...formItemLayout} label='名字' name='name'>
              {/* <Input name={'name'} defaultValue={this.state.data.name} />    
                 */}
                 <Input/>
            </Form.Item>
            <Form.Item label='姓名' name='name' rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
            {/* <Form.Item {...formItemLayout} label='年龄' name='age'>
              <Input defaultValue={this.state.data.age}></Input>
            </Form.Item>
            <Form.Item {...formItemLayout} label='部门'>
              <Input defaultValue={this.state.data.apartment}></Input>
            </Form.Item>
            <Form.Item {...formItemLayout} label='电话'>
              <Input defaultValue={this.state.data.phone}></Input>
            </Form.Item>
            <Form.Item {...formItemLayout} label='地区'>
              <Input defaultValue={this.state.data.area}></Input>
            </Form.Item> */}
            {/* <Form.Item wrapperCol={{ ...formItemLayout, offset: 8 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item> */}
          </Form>
        </Modal>
      </div>
    )
  }
}
